<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<script type="text/javascript">
    $(document).ready(playListInit);

    function playListInit() {
        // show (or hide) the add playlist form when clicked.
        $('span#addPlayListLink').bind('click', function() {
            $('div#addPlayList').slideToggle();
        });

        // submit request to add playlist. then refresh playlists.
        // TODO error handling!!!!!!
        $('input#addPlayListButton').bind('click', function() {
            submitAddPlayListForm();
        });

        $('input#cancelAddPlayListButton').bind('click', function() {
            $('div#addPlayList').slideToggle();
        });

        // subscribe events

        // show (or hide) the subscribe to playlist form when clicked.
        $('span#subPlayListLink').bind('click', function() {
            $('div#subPlayList').slideToggle();
        });

        // submit request to subscribe to playlist.
        // TODO error handling!!!!!!
        $('input#subPlayListButton').bind('click', function() {
            submitSubPlayListForm();
        });

        $('input#cancelSubPlayListButton').bind('click', function() {
            $('div#subPlayList').slideToggle();
        });
    }

    function submitAddPlayListForm() {
        var formData = $('form#addPlayListForm/input').serialize();
        $.post(contextPath + "ajax/EditPlayList.action?"+formData, function(data) {
            // refresh playlists area with response
            $('div#playLists').html(data);
            selectInit();
            // hide the addplaylist form
            $('div#addPlayList').slideToggle();

            // this only does shit when we're in link_decider mode...
            // TODO is there a better way to force serialized events from the link_decider page?
            viewVids($('input#linkVideoUrl').val());
        });
    }

    function submitSubPlayListForm() {
        var formData = $('form#subPlayListForm/input').serialize();
        $.post(contextPath + "ajax/EditPlayList.action?"+formData, function(data) {
            // refresh playlists area with response
            $('div#playLists').html(data);
            selectInit();
            // hide the subplaylist form
            $('div#subPlayList').slideToggle();

            // this only does shit when we're in link_decider mode...
            // TODO is there a better way to force serialized events from the link_decider page?
            viewVids($('input#linkVideoUrl').val());
        });
    }
</script>
<table cellpadding="4" width="90%">
    <tr>
        <td valign="top" width="300">
            <span id="addPlayListLink" class="fakeLink">add playlist</span>
<%--
            <span id="subPlayListLink" class="fakeLink">subscribe playlist</span>
--%>
            <div id="addPlayList" class="addPlayList" style="display:none;">
                <form id="addPlayListForm" onsubmit="$('#addPlayListButton').click();return false;">
                    <input type="hidden" name="addPlayList" value="addPlayList"/>
                    name: <input type="text" name="playListName" id="playListName"/>
                    <br/>
                    <br/>
                    description:<br/>
                    <textarea id="playListDescription" name="playListDescription" rows="5" cols="30"></textarea>
                    <br/>
                    <input type="button" name="cancelAddPlayList" id="cancelAddPlayListButton" value="cancel"/>
                    <input type="button" name="addPlayList" id="addPlayListButton" value="add list"/>
                </form>
            </div>
            <div id="subPlayList" class="subPlayList" style="display:none;">
                <form id="subPlayListForm" onsubmit="$('#subPlayListButton').click();return false;">
                    <input type="hidden" name="subPlayList" value="subPlayList"/>
                    sub url: <input type="text" name="subUrl" id="subUrl"/>
                    <br/>
                    <input type="button" name="cancelSubPlayList"   id="cancelSubPlayListButton" value="cancel"/>
                    <input type="button" name="subPlayList"         id="subPlayListButton"       value="subscribe"/>
                </form>
            </div>
            <br/>
            <div id="playLists">
                <jsp:include page="playlist_select.jsp"/>
            </div>
        </td>
        <td valign="top">
            <div id="viewer">
                <jsp:include page="video_preview.jsp"/>
            </div>
        </td>
    </tr>
</table>

